<template>
  <div class="mycoupon">
    <!-- 标题栏 -->
    <van-nav-bar title="我的优惠券" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon
          name="https://m.sparke.cn/_nuxt/img/back.eb96d29.png"
          size="24"
        />
      </template>
    </van-nav-bar>
    <!-- 搜索栏 -->
    <van-search left-icon="" placeholder="请输入兑换码" shape="round">
      <template #right-icon>
        <van-button round type="info">兑换</van-button>
      </template>
    </van-search>
    <!-- 优惠券切换栏 -->
    <van-tabs v-model="activeName">
      <van-tab title="未使用" name="a">
        <van-empty
          class="custom-image"
          image="https://m.sparke.cn/_nuxt/img/ic_empty_coupon.bd425b3.png"
          description="暂无优惠券哦"
        />
      </van-tab>
      <van-tab title="已过期" name="b">
        <van-empty
          class="custom-image"
          image="https://m.sparke.cn/_nuxt/img/ic_empty_coupon.bd425b3.png"
          description="暂无优惠券哦"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<style scoped>
/* 标题栏 */
.mycoupon >>> .van-nav-bar__title {
  font-size: 20px;
}
/* 搜索栏 */
.van-button--round {
  width: 80px;
  height: 38px;
  border-radius: 0 19px 19px 0;
}
.van-search .van-cell {
  padding: 0;
}
.van-search__content {
  padding-left: 20px;
  background-color: #f6f7f8;
}
.van-search {
  padding: 0 14px;
}
/* 优惠券切换栏 */
.mycoupon >>> .van-tabs__line {
  width: 24px;
  height: 4px;
  background-color: #4c84ff;
}
.mycoupon >>> .van-tabs__wrap {
  box-shadow: 0 3px 5px #e4e4e4;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.van-empty {
  margin-top: 92px;
}
.mycoupon >>> .van-empty__description {
  padding: 0;
  margin: 0;
}
.mycoupon >>> .van-tab--active {
  font-weight: 700;
  color: #222831;
}
</style>
<script>
export default {
  data() {
    return {
      activeName: "a",
    };
  },
  methods:{
    onClickLeft(){
      this.$router.push('/Me');
    }
  }
};
</script>